<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <style>
        body {
            background: lightblue;
        }

        *{box-sizing: border-box;}

        #water li {
            list-style: none;
            float: left;
            margin-right: 2px;
        }

        #water li div {
            background: white;
            padding: 5px;
            margin: 5px;
        }

        img {
            border: 3px solid blueviolet;
        }
    </style>
</head>

<body>

</body>
<script>
    var timmer; //优化滚动条事件
    var p_width = 200;  //图片的宽度
    var arrimg = ['1.jpg', '2.jpg', '3.jpg', '4.jpg','5.jpg','6.jpg','7.jpg','8.jpg','9.jpg','10.jpg','11.jpg','12.jpg','13.jpg'];

    window.onload = function () {
        // 计算列数
        num = cols();
        // 添加ul
        addUl(num);

        // 重新加载图片数据 ===> 应该判断需要从新加载数据的宽度区间
        dataUpdate(arrimg)
    }


    // 调整窗口宽度时，设置添加的li数量
    window.onresize = function () {
        // 清空body，重新计算
        var ul = document.getElementById('water');
        document.body.removeChild(ul);
        num = cols();
        addUl(num);
        // 重新加载图片数据 ===> 应该判断需要从新加载数据的宽度区间
        // getAjax('1.php', function (res) {//res是转换为js对象后的值
        dataUpdate(arrimg)
        // }, 'json');
    }

    // 计算当前屏幕宽度可存放列数
    function cols() {
        // 计算列数  舍去取整（窗口的宽度/图片的宽度）
        var width = document.documentElement.clientWidth - 20;
        var num = Math.floor(width / (p_width+ 30));
        return num;
    }


    // 添加列数
    function addUl(num) {
        var ul = document.createElement('ul');
        ul.id = 'water';
        for (var i = 0; i < num; i++) {
            // 使用循环创建li对象，添加到ul对象中
            var li = document.createElement('li');
            ul.appendChild(li)
        }
        // 将ul添加到body中
        document.body.appendChild(ul);
    }


    window.onscroll = function () {
        clearTimeout(timmer);
        timmer = setTimeout(function () {
            // 获取三高
            var cHeight = document.documentElement.clientHeight;//窗口
            var sHeight = document.documentElement.scrollTop || document.body.scrollTop;//滚动条距离上面的高度
            var dHeight = document.documentElement.scrollHeight;//文档的高度
            //需要让这个请求数据，一次请求只能触发一次 
            if (dHeight - cHeight - sHeight < 200) {
                // 重新加载数据===>可以通过传递不同的参数获取得到后台的值
                // getAjax('1.php', function (res) {//res是转换为js对象后的值
                dataUpdate(arrimg)
                // }, 'json');
            }
        }, 200)
    }

    // 封装一个处理的方法
    function dataUpdate(res) {
        //处理数据
        var ul = document.getElementById('water');
        var lis = ul.children;  //所有的li对象
        // 循环处理所有的图片
        for (var i = 0; i < res.length; i++) {
            console.log(res[i]);
            // 获取图片名称
            var imgName = res[i];
            // 创建一个div
            var div = document.createElement('div');
            div.innerHTML = '<img src="./img/' + imgName + '" width="' + p_width + '">';
            // 将div添加到页面中，添加到最短的li中
            var mask = -1;
            for (var j = 0; j < lis.length; j++) {
                // 获取当前li的高度
                var currentHeight = lis[j].offsetHeight;
                if (currentHeight < mask || mask == -1) {
                    mask = currentHeight;
                    // 最短的li
                    var sli = lis[j];
                    // 将div移动过来
                    sli.appendChild(div);
                }
            }
        }
    }



</script>

</html>